<template>
    <div>
        <mu-paper :z-depth="1" class="demo-loadmore-wrap">
            <mu-appbar color="teal" style="background:none;color:#000;">
                <div class="conts">
                    <div>返回</div>
                    <div>订单记录</div>
                    <div>
                        <mu-button icon slot="right" @click="refresh()">
                            <mu-icon value="~"></mu-icon>
                        </mu-button>
                    </div>
                </div>
            </mu-appbar>

            <mu-container ref="container" class="demo-loadmore-content">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                    <mu-list>
                        <template v-for="items in list">
                            <mu-list-item :key="items.id" class="warp">
                                <div class="warpMiddle">
                                    <div class="warpLayout">
                                        <div>订单编号：</div>
                                        <div>{{items.titlee}}</div>
                                    </div>
                                    <div>已经充电时长{{items.name}}小时</div>
                                    <div>充电金额{{items.$}}</div>
                                    <div>共1件商品 应付：￥{{items.$}}元</div>
                                    <div style="border:0.2px solid  rgb(17, 17, 17)"></div>
                                </div>
                            </mu-list-item>
                            <!-- <mu-divider /> -->
                        </template>
                    </mu-list>
                </mu-load-more>
            </mu-container>
        </mu-paper>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 10,
            refreshing: false,
            loading: false,
            text: 'List',
            list: [
                { id: 1, name: '1', $: '2', titlee: '进行中' },
                { id: 2, name: '2', $: '2', titlee: '结束' },
                { id: 3, name: '5', $: '2', titlee: '进行中' },
                { id: 4, name: '2', $: '2', titlee: '进行中' },
                { id: 5, name: '3', $: '2', titlee: '进行中' },
                { id: 6, name: '4', $: '2', titlee: '进行中' },
                { id: 7, name: '5', $: '2', titlee: '结束' },
                { id: 8, name: '2', $: '2', titlee: '进行中' },
                { id: 9, name: '2', $: '2', titlee: '进行中' },
                { id: 10, name: '4', $: '2', titlee: '结束' },
                { id: 11, name: '1', $: '2', titlee: '进行中' },
                { id: 12, name: '2', $: '2', titlee: '结束' }
            ]
        }
    },
    methods: {
        refresh() {
            this.refreshing = true
            this.$refs.container.scrollTop = 0
            setTimeout(() => {
                this.refreshing = false
                this.text = this.text === 'List' ? 'Menu' : 'List'
                this.num = 10
            }, 2000)
        },
        load() {
            this.loading = true
            setTimeout(() => {
                this.loading = false
                this.num += 10
            }, 2000)
        }
    }
}
</script>

<style lang="postcss">
.warpMiddle{
    width: 100%;
    font-size:25px;
}
.demo-loadmore-wrap {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .mu-appbar {
        width: 100%;
    }
}
.demo-loadmore-content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.mu-item {
    height: 18.4vh;
}
.mu-item-title {
    line-height: 0.2vw;
}
.conts {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: flex-start;
    font-size: 34px;
}
.demo-loadmore-wrap .mu-appbar {
    height: 11.667vw;
}
.warpLayout {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-content: flex-start;
            font-weight: bold;
            font-size: 28px;
            color: rgb(99, 103, 107);
        }
</style>
